<template>
    <div class='photoinfo-container'>
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfo.add_time | dateFormat}}</span>
            <span>点击次数:{{photoinfo.click}}次</span>
        </p>
        <hr>
1111:{{this.$route.params.id}}
        <!--缩略图区域-->
        <div  class='thumbs'>
           <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> -->
           <vue-preview :slides="list"  class="preview"></vue-preview>
        </div>

        <!--图片内容区域-->
        <div class='content' v-html='photoinfo.content'></div>

        <!--评论子组件区域-->
        <cmt-box :id='id'></cmt-box>
    </div>
</template>
<script>
//导入子组件
import comment from '../subcomponents/comment.vue'

export default {
    data(){
        return{
            id:this.$route.params.id,//从路由中获取到的图片Id
            photoinfo:'',//图片详情
            list:[] , //缩略图组件
            arr:[
                {id:1,name:'zs',age:'20'},
                 {id:2,name:'ls',age:'20'},
                  {id:3,name:'lm',age:'20'},
            ]
        };
    },
    created(){
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods:{
         getPhotoInfo(){
                 //获取图片详情
                 this.$http.get('getimageInfo/'+this.id).then(result=>{
                     if(result.status===200){
                        // console.log(result)
                         this.photoinfo=result.body
                        // console.log(this.photoinfo)
                     }
                 })
             },
         getThumbs(){
                 //获取缩略图
                 this.$http.get('getthumimages/'+this.id).then(result=>{
                     if(result.status===200){
                         //循环每个图片数据，补全图片的宽和高
                         console.log(result)
                         result.body.forEach(item=>{
                             item.w=600;
                             item.h=600;
                             item.msrc=item.src
                         });
                         //把完整的数据保持到list中
                         this.list=result.body;
                     }
                 })
             },
    },

    components:{//注册评论 子组件
        'cmt-box':comment
    }
    
}
</script>
<style lang='scss' >
.photoinfo-container{
     padding:5px;
     h3{
         color:#26a2ff;
         font: size 15px;
         text-align:center;
         margin:15px;
     }
     .subtitle{
         display:flex;
         justify-content:space-between;
     }
     .content{
         font-size:13px;
         line-height:30px 
     }
     .thumbs{//图片缩略图 样式固定类
          .my-gallery{
               display:flex;
               flex-wrap:wrap;//默认换行
               figure{
                   width:20%;//图片间隔
                   margin:5px;
                   img{
                          width:200px;
                          margin:13px;
                          box-shadow:0 0 8px #999;
                    }
               }
           }
              
          
     }  
}
</style> 